<template>
  <div class="app-container">
    <section class="table-bar">
      <el-input v-model="query.keyword" style="width: 250px" placeholder="客户名/手机" />
      <el-button style="margin: 10px;" type="success" @click="fetchData">查询</el-button>
      <el-table
        v-loading="loading"
        :data="user"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="id">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 100px" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="角色">
          <template slot-scope="scope">{{ scope.row.role_name }}</template>
        </el-table-column>
        <el-table-column align="center" label="从业时间">
          <template slot-scope="scope">{{ scope.row.level }}</template>
        </el-table-column>
        <el-table-column align="center" label="联系电话">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column align="center" label="排序">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" @change="change_sort(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column
          class-name="status-col"
          label="操作"
          width="220"
          align="center"
        >
          <template slot-scope="scope">
            <el-button v-show="(role == '超级管理员' )" size="mini" type="success" @click="handleSetRole(scope.row.id)">修改角色
            </el-button>
            <el-button v-show="(role == '管理员' || role == '员工' || role == '超级管理员')" size="mini" type="primary" @click="handleUpdateInfo(scope.row)">修改信息
            </el-button>
            <el-button v-show="role == '超级管理员' || role == '管理员' " size="mini" type="primary" @click="sort_top(scope.row)">置顶
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <section class="pagination-bar">
      <el-pagination
        background
        :current-page="query.page"
        :page-sizes="[100, 50, 30, 10]"
        :page-size="query.limit"
        layout="sizes, prev, pager, next"
        :total="count"
        @size-change="(limit) => {query.limit = limit; fetchData()}"
        @current-change="(page) => {query.page = page; fetchData()}"
      />
    </section>
    <el-dialog title="指定角色" :visible.sync="visible">
      <el-select v-model="setRoleData.role_id">
        <el-option
          v-for="item in roleOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button @click="setRole">提交</el-button>
    </el-dialog>
    <el-dialog title="修改信息" :visible.sync="infoVisible">
      <el-form ref="form" :model="tempInfoData">
        <el-form-item label="姓名">
          <el-input v-model="tempInfoData.name" />
        </el-form-item>
        <el-form-item v-show="role == '管理员'" label="从业时间">
          <el-input v-model="tempInfoData.level" />
        </el-form-item>
        <!-- <el-form-item label="联系电话">
          <el-input v-model="tempInfoData.phone"></el-input>
        </el-form-item> -->
      </el-form>
      <el-button @click="updateInfo">提交</el-button>
      <el-upload
        style="margin-top: 50px"
        :action="this.updateAvatarUrl"
        name="file"
        :file-list="fileList"
        :data="{id: tempInfoData.id,}"
        :headers="this.updateHeader"
        :on-success="fetchData"
      >
        <el-button size="small" type="primary">上传头像</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'
import { getToken } from '../../utils/auth'

export default {
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  data() {
    return {
      updateAvatarUrl: `${process.env.VUE_APP_BASE_API}/api/management/role/updateAvatar`,
      updateHeader: {
        'Authorization': 'bearer' + getToken()
      },
      user: '',
      count: 0,
      query: {
        page: 1,
        limit: 10,
        keyword: ''
      },
      loading: false,
      visible: false,
      setRoleData: {
        user_id: '',
        role_id: ''
      },
      roleOptions: '',
      infoVisible: false,
      tempInfoData: ''
    }
  },
  created() {
    this.fetchData()
    this.getRoleOptions()
  },
  methods: {
    sort_top(r) {
      console.log(this.user[0].sort)
      this.change_sort(r, (this.user[0].sort + 1))
    },
    change_sort(r, f = null) {
      console.log(r)
      let num = r.sort
      if (f) {
        num = f
      }
      const sortData = {
        id: r.id,
        sort: num
      }
      api.role.updateSort(sortData).then(res => {
        if (res.err_no === 0) {
          this.$message({
            type: 'success',
            message: '排序成功'
          })
          this.fetchData()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getRoleOptions() {
      api.role.getRoleOptions().then(res => {
        if (res.err_no === 0) {
          this.roleOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    fetchData() {
      console.log(this.$route.name)

      if (this.$route.name == 'role') {
        this.query.role_id = 4
      }
      if (this.$route.name == 'role3') {
        this.query.role_id = 3
      }
      if (this.$route.name == 'role2') {
        this.query.role_id = 2
      }
      api.role.getRole(this.query).then(res => {
        if (res.err_no === 0) {
          this.user = res.data.data
          this.count = res.data.count
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleSetRole(id) {
      this.visible = true
      this.setRoleData = {
        user_id: id,
        role_id: ''
      }
    },
    setRole() {
      api.role.setRole(this.setRoleData).then(res => {
        if (res.err_no === 0) {
          this.fetchData()
          this.visible = false
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleUpdateInfo(row) {
      this.infoVisible = true
      this.tempInfoData = row
    },
    updateInfo() {
      api.role.updateInfo(this.tempInfoData).then(res => {
        if (res.err_no === 0) {
          this.fetchData()
          this.infoVisible = false
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
